import React, { useEffect } from 'react'
import './HeroList.css';
import axios from 'axios';
import { useState } from 'react';
import { useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';


export default function HeroList() {
  //声明状态
  let [heros, setHeros] = useState([]); //初始值设定要与将来服务端返回的数据类型保持一致
  let [keyword, setKeyword] = useState(undefined);
  //创建 ref 值
  let input = useRef();
  //组件挂载完毕   use 使用  effect 作用 影响  专门用来处理副作用的
  useEffect(() => {
    //发送 AJAX 请求获取英雄数据
    async function main(){
      let {data} = await axios.get('http://api.xiaohigh.com/heros', {
        params: {
          name_like: keyword
        }
      });
      //更新状态
      setHeros(data);
    }
    main();
  }, [keyword]);

  //声明函数
  let search = async () => {
    //获取 input 的值
    let keyword = input.current.value;
    //更新 keyword 状态
    setKeyword(keyword);
  }
  
  //获得跳转的函数
  let navigate = useNavigate();

  return (
    <div className="container" style={{paddingTop: 20}}>
      <button className='btn btn-danger' onClick={() => {
        navigate(1);
      }}>前进</button>
      <h2>
        英雄列表
        
      </h2>
      <hr />
      <div className="row">
        <div className="col-lg-3 col-lg-offset-9">
          <div className="input-group">
            <input type="text" ref={input} className="form-control" placeholder="关键字" />
            <span className="input-group-btn">
              <button className="btn btn-default" type="button" onClick={search}>搜索</button>
            </span>
          </div>
        </div>
      </div>
      <hr />
      <div className="hero-list">
        {
          heros.map(item => {
            return <div key={item.id} className="hero-item">
              <img onClick={() => {
                //使用函数进行跳转
                navigate(`/hero`, {
                  state: {
                    id: item.id
                  },
                  replace: false, //替换模式
                });
              }} width="100%" src={"http://cdn.xiaohigh.com" + item.image} alt="" />
              {/* <p style={{textAlign: 'center'}}>云樱</p> */}
              <p className='text-center'>{item.name}</p>
            </div>
          })
        }
      </div>
    </div>
  )
}
